<style>
    .mailModal {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<template>
    <ApplyListTemplate applyListClass="currencyReturn">
        <template slot="applyQueryForm">
            <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form rui-query-form">
                <div class="applyQuerySearchRow">
                    <div class="applyQueryHead"></div>
                    <div class="applyQuerySearchItem">
                        <Form-item prop="typeId">
                            <div>
                                <Select v-model="searchForm.typeId" @on-change="handleSearch" placeholder="奖励类型" prefix="ios-search" clearable >
                                    <Option v-for="item in typeList" :value='item.rewardTypeid'
                                            :key="item.rewardTypeid">{{ item.typename }}
                                    </Option>
                                </Select>
                            </div>
                        </Form-item>
                    </div>
                </div>
            </Form>
        </template>
        <template slot="applyQueryTable">
            <Table :loading="loading" :columns="columns" :data="data" sortable="custom" ref="table">
                <template slot-scope="{ row, index }" slot="action">
                    <div class="btn-no-border">
                        <Button ghost style="margin-right:5px" type="primary" size="small"
                                 @click="determine(row)">重新上传
                        </Button>
                    </div>
                </template>
            </Table>
        </template>
        <template slot="applyQueryPage">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                  @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                  size="small" show-total show-elevator show-sizer></Page>
        </template>
        <template slot="applyQueryMore">
            <Modal :title="modalTitle" v-model="deterModalVisible" :mask-closable='false' :width="400"
                   class="mailModal">
                上传附件：<Button icon="ios-cloud-upload-outline">选取文件</Button>
                <div slot="footer">
                    <Button type="primary" @click="determineCheck">上传</Button>
                </div>
            </Modal>
        </template>
    </ApplyListTemplate>
</template>
<script>
    import {
        getTypeId,
    } from "../../api/currency-reward/currencyReward";
    import {
        getList,
    } from "../../api/currency-return/currencyReturn";
    import ApplyListTemplate from "_p/afs-apply/pages/common/ApplyListTemplate";
    export default {
        name: "currencyReturn",
        components: { ApplyListTemplate },
        data() {
            return {
                loading: false,
                submitLoading: false,
                deterModalVisible: false,
                typeList: [],
                total: 0,
                modalType: 0,
                modalTitle: "",
                searchForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    typeId: ""
                },
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                    }, {
                        title: "季度奖",
                        key: "awardname",
                        align: "center",
                        minWidth: 160,
                    },
                    {
                        title: "金额",
                        key: "money",
                        align: "center",
                        minWidth: 100,
                    },
                    {
                        title: "状态",
                        key: "name",
                        align: "center",
                        minWidth: 100,
                    },
                    {
                        title: "季度",
                        key: "qname",
                        align: "center",
                        minWidth: 100,
                    },
                    {
                        title: "总得分",
                        key: "totalscore",
                        align: "center",
                        minWidth: 80,
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 100,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                data: [],
            }
        },
        methods: {
            //查询按钮操作
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.queryData();
            },
            //多条件分页查询
            queryData(pageNumber = 1, pageSize = 10) {
                let params = {
                    page: pageNumber,
                    pagesize: pageSize,
                    rewardTypeid: this.searchForm.typeId
                };
                getList(params).then(res => {
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            determine(row) {
                this.modalTitle="重新上传返利回执";
                this.deterModalVisible = true;
            },
            determineCheck() {
                alert("确认上传回执");
            },
            //改变当前页码
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.queryData(v, this.searchForm.pageSize);
            },
            //改变页码数量
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.queryData(this.searchForm.pageNumber, v);
            },
            //重置表单数据,并重新加载数据
            handleReset() {
                //this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.searchForm.year = "";
                this.searchForm.quarter = "";
                this.searchForm.status = "";
                this.searchForm.typeId="";
                this.queryData();
            },
            //获取奖励列表
            gettypeList() {
                let params = null;
                getTypeId(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.typeList = res.data.data;
                    }
                });
            },
        },
        mounted() {
            this.gettypeList();
            this.handleSearch();
        }
    }
</script>
